import { Suspense, useEffect, useState } from 'react'
import './App.css'
// App.js
import {
  Router,
  Link,
  createRoutes,
  Outlet,
  useNavigate,
  useParams,
  useQuery
} from './lib'

// 页面组件
function Home() {
  useEffect(() => {
    console.log('Home mount')
    return () => {
      console.log('Home unmount')
    }
  }, [])
  return (
    <div>
      <h1>首页</h1>
      <Link to='/about'>关于我们</Link>
      <br />
      <Link to='/ai'>管理后台</Link>
      <br />
      <Link to='/ai/users/test'>管理后台test</Link>
      <br />
      <Link to='/push' replace={false}>
        测试push
      </Link>
    </div>
  )
}

function About() {
  useEffect(() => {
    return () => {
      console.log('unmount')
    }
  }, [])
  return (
    <div>
      <h1>关于我们</h1>
      <Link to='/'>返回首页</Link>
    </div>
  )
}
function NavBar() {
  // const { replace } = useNavigate()
  // navigate.on('ai', (val) => {
  //   console.log('ai', val)
  // })
  const [count, setCount] = useState(0)
  useEffect(() => {
    console.log('NavBar mount')
    return () => {
      console.log('NavBar unmount')
    }
  }, [])
  return (
    <nav>
      <h2>管理后台</h2>
      <ul>
        {/* <li
          onClick={() => {
            index++
            setCount(count + 1)
            replace({
              path: '/ai/users/test',
              query: { name: 'zzgh', index, count },
              params: { id: 123, index }
            })
          }}
        >
          用户管理(函数式点击)
        </li>
        <li
          onClick={() => {
            index++
            replace({
              path: '/ai/users/test/test2',
              query: { name: 'zzgh', index },
              params: { id: 123, index }
            })
          }}
        >
          用户管理/ai/users/test/test2(函数式点击)
        </li> */}
        <li>
          <Link
            to='/ai/users/test'
            query={{ name: ' zzgh', index }}
            params={{ id: 123, index }}
          >
            用户管理
          </Link>
        </li>
        <li>
          <Link
            to='/ai/users/test/test2'
            query={{ name: ' zzgh', index }}
            params={{ id: 123, index }}
          >
            用户管理
          </Link>
        </li>
        <li>
          <Link to='/ai/settings'>系统设置</Link>
        </li>
      </ul>
    </nav>
  )
}
let index = 0
// 布局组件
function AdminLayout() {
  console.log(666666)
  // const { replace } = useNavigate()
  useEffect(() => {
    console.log('AdminLayout mount')
    return () => {
      console.log('AdminLayout unmount')
    }
  }, [])
  return (
    <div style={{ display: 'flex', height: '100vh' }}>
      <NavBar />
      <div
        style={{
          display: 'flex',
          flex: 1,
          justifyContent: 'center',
          alignItems: 'center'
        }}
      >
        <Outlet name='ai' />
      </div>
    </div>
  )
}

function UserList() {
  // ai/users
  const { params, query, on } = useNavigate()

  on('users', (val) => {
    console.log('users', val)
  })
  console.log('用户列表页面', query, params)
  return (
    <div style={{ border: '1px solid #ccc' }}>
      <h3>用户列表页面</h3>
      <Link to='/'>返回首页</Link>
      <Outlet name='users'></Outlet>
    </div>
  )
}
function UserDetail() {
  console.log('u用户详情页面')
  return (
    <div style={{ border: '1px solid #ccc' }}>
      <Link to='/'>返回首页</Link>
      <h3>用户详情页面</h3>
    </div>
  )
}
function Settings() {
  console.log('系统设置页面')
  return (
    <div style={{ border: '1px solid #ccc' }}>
      <Link to='/'>返回首页</Link>
      <h3>系统设置页面</h3>
    </div>
  )
}

function Push() {
  console.log('push页面')
  const { back, push } = useNavigate()
  return (
    <div>
      <button onClick={() => back()}>返回</button>
      <h3 onClick={() => push('/push2')}>去往push2页面</h3>
    </div>
  )
}
function Push2() {
  console.log('push2页面')
  const { back } = useNavigate()
  return (
    <div style={{ border: '1px solid #ccc' }}>
      <button onClick={() => back()}>返回</button>
      <h3>我是push2页面</h3>
    </div>
  )
}
function Test() {
  const { params, query, emit } = useNavigate()

  useEffect(() => {
    console.log('test mount')
    return () => {
      console.log('test unmount')
    }
  }, [])

  console.log('用户test页面', query, params)
  return (
    <div style={{ border: '1px solid #ccc' }}>
      <Link to='/'>返回首页</Link>
      <h3>/ai/users/test</h3>
      <button
        onClick={() => {
          emit('ai', { dsf: 'dsf' })
        }}
      >
        触发特定组件on
      </button>
      <Outlet name='test'></Outlet>
    </div>
  )
}
function Test2() {
  const params = useParams()
  const query = useQuery()
  useEffect(() => {
    console.log('test2 mount')
    return () => {
      console.log('test2 unmount')
    }
  }, [])
  console.log('用户test2页面', query, params)
  return (
    <div style={{ border: '1px solid #ccc' }}>
      <Link to='/'>返回首页</Link>
      <h3>/ai/users/test/test2</h3>
    </div>
  )
}
// 可以通过添加日志来观察执行情况
// const LazyHome = lazy(() => import("./pages/Home"));
// 数组方式配置路由
const routesConfig = createRoutes([
  {
    path: '/',
    element: <Home />
  },
  {
    path: '/push',
    element: <Push />
  },
  {
    path: '/push2',
    element: <Push2 />
  },
  {
    path: '/about',
    element: <About />
  },
  {
    path: '/ai',
    element: (
      <Suspense fallback={<div>Loading...</div>}>
        <AdminLayout />
        {/* <LazyHome /> */}
      </Suspense>
    ),
    children: [
      {
        path: '/users',
        element: <UserList />,
        children: [
          {
            path: '/test',
            element: <Test />,
            children: [
              {
                path: '/test2',
                element: <Test2 />
              }
            ]
          }
        ]
      },
      {
        path: 'detail',
        element: <UserDetail />
      },
      {
        path: '/settings',
        element: <Settings />
      }
    ]
  }
])
function App() {
  return <Router initialPath='/' routes={routesConfig} />
}

export default App
